<template>
    <div class="content paper-layout">
        <Form ref="form" :model="form" :show-message="false" :rules="ruleValidate" :label-width="80">
            <div class="paper-container">
                <div class="paper-head">
                    <span>当前总分：{{dx.length*form.dx+duox.length*form.duox+tk.length*form.tk+pd.length*form.pd+jd.length*form.jd+js.length*form.js+alfx.length*form.alfx}}</span>
                    <span>总题量 ：{{dx.length+duox.length+tk.length+pd.length+jd.length+js.length+alfx.length}}</span>
                    <span>单选题 ：{{dx.length}}</span>
                    <span>多选题 ：{{duox.length}}</span>
                    <span>填空题 ：{{tk.length}}</span>
                    <span>判断题 ：{{pd.length}}</span>
                    <span>简答题 ：{{jd.length}}</span>
                    <span>商品归类题 ：{{js.length}}</span>
                    <span>案例分析题 ：{{alfx.length}}</span>
                </div>
                <div class="paper-content" >
                    <div class="paper-item" v-for="(type,index) in types" :key="'type'+index">
                        <div class="question-title">
                            <span v-if="index==0&&dx.length>0" class="paper-item-title title-left">
                                一、单选题
                                <span v-if="!showBtns">(共{{dx.length}}题，合计{{(dx.length)*(form.dx)}}分)</span>
                            </span>
                            <span v-if="index==1&&duox.length>0" class="paper-item-title title-left">
                                {{wz[result[1]+1]}}、多选题
                                <span v-if="!showBtns">(共{{duox.length}}题，合计{{(duox.length)*(form.duox)}}分)</span>
                            </span>

                            <span v-if="index==2&&tk.length>0" class="paper-item-title title-left">
                                {{wz[result[1]+result[2]+1]}}、填空题
                                <span v-if="!showBtns">(共{{tk.length}}题，合计{{(tk.length)*(form.tk)}}分)</span>
                            </span>
                            <span v-if="index==3&&pd.length>0" class="paper-item-title title-left">
                                {{wz[result[1]+result[2]+result[3]+1]}}、判断题
                                <span v-if="!showBtns">(共{{pd.length}}题，合计{{(pd.length)*(form.pd)}}分)</span>
                            </span>
                            <span v-if="index==4&&jd.length>0" class="paper-item-title title-left">
                                {{wz[result[1]+result[2]+result[3]+result[4]+1]}}、简答题
                                <span v-if="!showBtns">(共{{jd.length}}题，合计{{(jd.length)*(form.jd)}}分)</span>
                            </span>
                            <span v-if="index==5&&js.length>0" class="paper-item-title title-left">
                                {{wz[result[1]+result[2]+result[3]+result[4]+result[5]+1]}}、商品归类题
                                <span v-if="!showBtns">(共{{js.length}}题，合计{{(js.length)*(form.js)}}分)</span>
                            </span>
                            <span v-if="index==6&&alfx.length>0" class="paper-item-title title-left">
                                {{wz[result[1]+result[2]+result[3]+result[4]+result[5]+result[6]+1]}}、案例分析题
                                <span v-if="!showBtns">(共{{alfx.length}}题，合计{{(alfx.length)*(form.alfx)}}分)</span>
                            </span>
                            <span v-if="showBtns">
                                <!--单选题-->
                                <span v-if="index==0&&type.length>0" class="title-right">
                                    题量：{{dx.length}}
                                    <FormItem class="w60" label="每题分值" prop="dx">
                                        <Input v-model="form.dx" placeholder="" />
                                    </FormItem>
                                    合计得分：{{(dx.length)*(form.dx)}}
                                </span>
                                <!--多选题-->
                                <span v-if="index==1&&type.length>0" class="title-right">
                                    题量：{{duox.length}}
                                    <FormItem class="w60" label="每题分值" prop="duox">
                                        <Input v-model="form.duox" placeholder="" />
                                    </FormItem>
                                    合计得分：{{(duox.length)*(form.duox)}}
                                </span>
                                <!--填空题-->
                                <span v-if="index==2&&type.length>0" class="title-right">
                                    题量：{{tk.length}}
                                    <FormItem class="w60" label="每题分值" prop="tk">
                                        <Input v-model="form.tk" placeholder="" />
                                    </FormItem>
                                    合计得分：{{(tk.length)*(form.tk)}}
                                </span>
                                <!--判断题-->
                                <span v-if="index==3&&type.length>0" class="title-right">
                                    题量：{{type.length}}
                                    <FormItem class="w60" label="每题分值" prop="pd">
                                        <Input v-model="form.pd" placeholder="" />
                                    </FormItem>
                                    合计得分：{{(type.length)*(form.pd)}}
                                </span>
                                <!--简答题-->
                                <span v-if="index==4&&type.length>0" class="title-right">
                                    题量：{{type.length}}
                                    <FormItem class="w60" label="每题分值" prop="jd">
                                        <Input v-model="form.jd" placeholder="" />
                                    </FormItem>
                                    合计得分：{{(type.length)*(form.jd)}}
                                </span>
                                <!--商品归类题-->
                                <span v-if="index==5&&type.length>0" class="title-right">
                                    题量：{{type.length}}
                                    <FormItem class="w60" label="每题分值" prop="js">
                                        <InputNumber v-model="form.js" placeholder="" />
                                    </FormItem>
                                    合计得分：{{(type.length)*(form.js)}}
                                </span>
                                <!--案例分析题-->
                                <span v-if="index==6&&type.length>0" class="title-right">
                                    题量：{{type.length}}
                                    <FormItem class="w60" label="每题分值" prop="alfx">
                                        <InputNumber v-model="form.alfx" placeholder="" />
                                    </FormItem>
                                    合计得分：{{(type.length)*(form.alfx)}}
                                </span>
                            </span>
                        </div>
                        <div>
                            <div class="question-item clearfix" v-for="(item,i) in type" :key="i">
                                <div class="question-item__content" >
                                    <div class="question-title">
                                        <span class="title-left">{{i+1}} <span class="nexth" v-html="item.topic"> </span>（ ）</span>
                                        <span class="title-right" v-if="showBtns">
                                            <Icon class="f24" @click="up(type,item,i)" type="ios-arrow-dropup" />
                                            <Icon class="f24" @click="down(type,item,i)" type="ios-arrow-dropdown" />
                                            <Icon class="f24" @click="del(type,item,i,1)" type="md-close" />
                                        </span>
                                    </div>
                                    <div v-if="(index=='0'||index=='1')&&(!!item.opt||!!item.image)">
                                        <div v-for="(o,ind) in item.opt.split('|')" :key="o">
                                            <p>
                                                {{ind==0?'A':ind==1?'B':ind==2?'C':ind==3?'D':ind==4?'E':ind==5?'F':'G'}}
                                                <span v-if="!!item.image&&item.image.split('|')[ind]"> <img class="opt-img" :src="item.image&&item.image.split('|')[ind]"/></span>
                                                <span class="nexth" v-html="o" ></span>
                                            </p>
                                        </div>
                                    </div>
                                    <div v-if="index=='3'">
                                        <div>
                                            <p>A:正确</p>
                                            <p>B:错误</p>
                                        </div>
                                    </div>
                                    <div v-if="index=='2'||index=='4'||index=='5'||index=='6'">
                                        <textarea class="w100" placeholder="请在此处作答"></textarea>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--
        <div class="paper-item" v-if="duox.length>0">
          <div class="question-title">
            <span class="paper-item-title title-left">{{wz[result[1]+1]}}、多选题</span>
            <span class="title-right">
                题量：{{duox.length}}
                 <FormItem class="w60" label="每题分值" prop="duox">
                    <Input v-model="form.duox" placeholder="" />
                </FormItem>
                合计得分：{{(duox.length)*(form.duox)}}
            </span>
          </div>
          <div>
            <div class="question-item clearfix" v-for="(item,index) in duox" :key="index">
              <div class="question-item__content">
                <div class="question-title">
                    <span class="title-left">{{index+1}} {{item.topic}} （ ）</span>
                    <span class="title-right">
                        <Icon class="f24" @click="up(dx,item,index)" type="ios-arrow-dropup" />
                        <Icon class="f24" @click="down(dx,item,index)" type="ios-arrow-dropdown" />
                        <Icon class="f24" @click="del(dx,item,index,2)" type="md-close" />
                    </span>
                </div>
                <div>
                  <div v-for="(item,index) in item.opt.split('##')" :key="item">
                    <p>{{index==0?'A':index==1?'B':index==2?'C':index==3?'D':index==4?'E':index==5?'F':'G'}}
                        {{item}}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="paper-item" v-if="tk.length>0">
          <div class="question-title">
            <span class="paper-item-title title-left">{{wz[result[1]+result[2]+1]}}、填空题</span>
            <span class="title-right">
                题量：{{duox.length}}
                 <FormItem class="w60" label="每题分值" prop="tk">
                    <Input v-model="form.tk" placeholder="" />
                </FormItem>
                合计得分：{{(tk.length)*(form.tk)}}
            </span>
          </div>
          <div>
            <div class="question-item clearfix" v-for="(item,index) in tk" :key="index">
              <div class="question-item__content">
                <div class="question-title">
                    <span class="title-left">{{index+1}} {{item.topic}} （ ）</span>
                    <span class="title-right">
                        <Icon class="f24" @click="up(tk,item,index)" type="ios-arrow-dropup" />
                        <Icon class="f24" @click="down(tk,item,index)" type="ios-arrow-dropdown" />
                        <Icon class="f24" @click="del(tk,item,index,3)" type="md-close" />
                    </span>
                </div>
                <div>
                  sss
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="paper-item" v-if="pd.length>0">
          <div class="question-title">
            <span class="paper-item-title title-left">{{wz[result[1]+result[2]+result[3]+1]}}、判断题</span>
            <span class="title-right">
                题量：{{pd.length}}
                 <FormItem class="w60" label="每题分值" prop="pd">
                    <Input v-model="form.pd" placeholder="" />
                </FormItem>
                合计得分：{{(pd.length)*(form.pd)}}
            </span>
          </div>
          <div>
            <div class="question-item clearfix" v-for="(item,index) in pd" :key="index">
              <div class="question-item__content">
                <div>{{index+1}} {{item.topic}} （ ）</div>
                <div>
                  <div>
                      <p>A:正确</p>
                      <p>B:错误</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="paper-item" v-if="jd.length>0">
          <div class="question-title">
            <span class="paper-item-title title-left">{{wz[result[1]+result[2]+result[3]+result[4]+1]}}、简答题</span>
            <span class="title-right">
                题量：{{duox.length}}
                 <FormItem class="w60" label="每题分值" prop="jd">
                    <Input v-model="form.jd" placeholder="" />
                </FormItem>
                合计得分：{{(jd.length)*(form.jd)}}
            </span>
          </div>
          <div>
            <div class="question-item clearfix" v-for="(item,index) in jd" :key="index">
              <div class="question-item__content">
                <div class="question-title">
                    <span class="title-left">{{index+1}} {{item.topic}} （ ）</span>
                    <span class="title-right">
                        <Icon class="f24" @click="up(jd,item,index)" type="ios-arrow-dropup" />
                        <Icon class="f24" @click="down(jd,item,index)" type="ios-arrow-dropdown" />
                        <Icon class="f24" @click="del(jd,item,index,3)" type="md-close" />
                    </span>
                </div>
                <div>
                  sss
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="paper-item" v-if="js.length>0">
          <div class="question-title">
            <span class="paper-item-title title-left">{{wz[result[1]+result[2]+result[3]+result[4]+result[5]+1]}}、简答题</span>
            <span class="title-right">
                题量：{{js.length}}
                 <FormItem class="w60" label="每题分值" prop="js">
                    <Input v-model="form.js" placeholder="" />
                </FormItem>
                合计得分：{{(js.length)*(form.js)}}
            </span>
          </div>
          <div>
            <div class="question-item clearfix" v-for="(item,index) in js" :key="index">
              <div class="question-item__content">
                <div class="question-title">
                    <span class="title-left">{{index+1}} {{item.topic}} （ ）</span>
                    <span class="title-right">
                        <Icon class="f24" @click="up(js,item,index)" type="ios-arrow-dropup" />
                        <Icon class="f24" @click="down(js,item,index)" type="ios-arrow-dropdown" />
                        <Icon class="f24" @click="del(js,item,index,3)" type="md-close" />
                    </span>
                </div>
                <div>
                  sss
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="paper-item" v-if="alfx.length>0">
          <div class="question-title">
            <span class="paper-item-title title-left">{{wz[result[1]+result[2]+result[3]+result[4]+1]}}、简答题</span>
            <span class="title-right">
                题量：{{alfx.length}}
                 <FormItem class="w60" label="每题分值" prop="anlfx">
                    <Input v-model="form.alfx" placeholder="" />
                </FormItem>
                合计得分：{{(alfx.length)*(form.alfx)}}
            </span>
          </div>
          <div>
            <div class="question-item clearfix" v-for="(item,index) in jd" :key="index">
              <div class="question-item__content">
                <div class="question-title">
                    <span class="title-left">{{index+1}} {{item.topic}} （ ）</span>
                    <span class="title-right">
                        <Icon class="f24" @click="up(jd,item,index)" type="ios-arrow-dropup" />
                        <Icon class="f24" @click="down(jd,item,index)" type="ios-arrow-dropdown" />
                        <Icon class="f24" @click="del(jd,item,index,3)" type="md-close" />
                    </span>
                </div>
                <div>
                  sss
                </div>
              </div>
            </div>
          </div>
        </div>
        -->
                </div>

            </div>
        </Form>
        <div class="submit-footer" v-if="showBtns">
            <Button @click="sumbit">保存</Button>
            <Button type="primary" @click="before">上一步</Button>
            <Button>取消</Button>
        </div>
        <div class="submit-footer" v-else>
            <Button @click="goBack">返回</Button>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        data: {
            type: Array,
            default: () => {}
        },
        bc: {
            type: Function
        },
        before: {
            type: Function
        },
        showBtns: {
            type: Boolean,
            default: false
        }
    },
    components: {

    },
    data () {
        return {

            result: ['有无数据', 0, 0, 0, 0, 0, 0, 0],
            ruleValidate: {
                dx: [
                    { required: true, type: 'number', message: '', trigger: 'blur,change' }
                ],
                duox: [
                    { required: true, type: 'number', message: '', trigger: 'blur,change' }
                ],
                tk: [
                    { required: true, type: 'number', message: '', trigger: 'blur,change' }
                ],
                pd: [
                    { required: true, type: 'number', message: '', trigger: 'blur,change' }
                ],
                jd: [
                    { required: true, type: 'number', message: '', trigger: 'blur,change' }
                ],
                js: [
                    { required: true, type: 'number', message: '', trigger: 'blur,change' }
                ],
                alfx: [
                    { required: true, type: 'number', message: '', trigger: 'blur,change' }
                ]
            },
            form: {
                dx: '',
                duox: '',
                tk: '',
                pd: '',
                jd: '',
                js: '',
                alfx: ''
            },
            paperList: [],
            types: [

            ],
            wz: {
                '1': '一',
                '2': '二',
                '3': '三',
                '4': '四',
                '5': '五',
                '6': '六',
                '7': '七'
            },
            dx: [],
            duox: [],
            tk: [],
            pd: [],
            jd: [],
            js: [],
            alfx: []
        }
    },
    methods: {
        up (data, one, index) {
            if (index != 0) {
                var prev = data[index - 1]
                data.splice(index - 1, 1, one)
                data.splice(index, 1, prev)
            }
        },
        down (data, one, index) {
            if (index != (data.length - 1)) {
                var now = one
                var next = data[index + 1]
                data.splice(index, 1, next)
                data.splice(index + 1, 1, now)
            }
        },
        del (data, one, index, num) {
            data.splice(index, 1)
            if (data.length == 0) {
                this.result[num] = 0
            }
        },
        sumbit () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.paperList.map(item => {
                        if (item.type == '1') {
                            item.score = this.form.dx
                        } else if (item.type == '2') {
                            item.score = this.form.duox
                        } else if (item.type == '3') {
                            item.score = this.form.tk
                        } else if (item.type == '4') {
                            item.score = this.form.pd
                        } else if (item.type == '5') {
                            item.score = this.form.jd
                        } else if (item.type == '6') {
                            item.score = this.form.js
                        } else if (item.type == '7') {
                            item.score = this.form.alfx
                        }
                    })
                    this.bc(this.paperList)
                } else {
                    this.$Message.error('Fail!')
                }
            })
        },
        prev () {

        },
        handleBack () {
            this.$router.replace({
                name: 'testPaperList'
            })
        },
        goBack () {
            this.$router.replace({
                name: 'testPaperList'
            })
        }
    },
    mounted () {
        console.log('data', this.data)
        this.paperList = this.data
        this.paperList.map((item) => {
            if (item.type == 1) {
                // 单选题
                this.result[1] = 1
                this.dx.push(item)
                this.form.dx = parseInt(item.score)
            } else if (item.type == 2) {
                // 多选题
                this.result[2] = 1
                this.duox.push(item)
                this.form.duox = parseInt(item.score)
            } else if (item.type == 3) {
                this.result[3] = 1
                this.tk.push(item)
                this.form.tk = parseInt(item.score)
            } else if (item.type == 4) {
                this.result[4] = 1
                this.pd.push(item)
                this.form.pd = parseInt(item.score)
            } else if (item.type == 5) {
                this.result[5] = 1
                this.jd.push(item)
                this.form.jd = parseInt(item.score)
            } else if (item.type == 6) {
                this.result[6] = 1
                this.js.push(item)
                this.form.js = parseInt(item.score)
            } else if (item.type == 7) {
                this.result[7] = 1
                this.alfx.push(item)
                this.$set(this.form, 'alfx', parseInt(item.score))
            }
        })
        this.types.push(this.dx)
        this.types.push(this.duox)
        this.types.push(this.tk)
        this.types.push(this.pd)
        this.types.push(this.jd)
        this.types.push(this.js)
        this.types.push(this.alfx)

    // this.bc(this.paperList);
    }
}
</script>
<style lang="less" scoped>
.f24{
    font-size:24px;
}
.paper-layout {
  h2 {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .paper-head {
    padding: 10px;
    background-color: #eee;
    font-size: 14px;
    span + span {
      margin-left: 20px;
    }
  }
  .paper-container {
    border: 1px solid #ccc;
  }
  .paper-content {
    padding: 20px 10px;
  }
}
.paper-item {
  & + & {
    margin-top: 10px;
  }
}
.paper-item-title {
  font-weight: 700;
  font-size: 18px;
  margin-right:5px
}
.question-item__content {
  padding: 10px;
  border: 1px solid #ccc;
  margin-top: 10px;
  margin-bottom: 10px;
}
.question-title {
  display: flex;
  .title-left {
    line-height: 30px;
  }
  .title-right {
    flex: 1;
    line-height: 30px;
    text-align: right;
    min-width: 100px;
  }
}
</style>
<style>
.w60.ivu-form-item{
  margin-bottom:0px;
  display: inline-block;
}
.w60 input{
  width:60px;
}
.w100{
  width:100%;
  min-height:60px;
  border:1px solid rgb(204, 204, 204);
}
.opt-img {
  width: 200px;
  height: 150px;
}
.nexth{
    white-space:pre;
    white-space: normal;
}
</style>
